<!-- 商品列表页 可切换布局 -->
<template>
	<view class="goodsContent" >
		<!-- 列表状态 -->
		<view class="hisGoodsList" v-if='type == 2 && goodsData.length>0'>
			<view @click="toGoods(item.goods_id,item.store_id)" class="hisGoods flex-box" v-for="(item,index) in goodsData" :key='index'>
				<image class="hisImg radius" :src="item.img?$imgUrls(item.img):staticUrl+'/images/imageLoading.png'" mode="aspectFill"></image>
				<view class="flex goodsmsg flex-box flex-between">
					<view>
						<view class="thmeTxt hisGoodsName lines2">
							<text v-if='item.type == 1' class="speTag">特价</text>
							<text v-if='item.type == 2' class="speTag">团购</text>
							{{item.name}}
						</view>
						<view class="saled selfEnd flex-box align-center" v-if='hot == 1'>
							<text>已售{{item.sales_number}}</text>
							<text>热度{{item.show_number}}</text>
						</view>
					</view>
					<view class="profitTitle_ lines" v-if='item.profitTitle'>
						<text>{{ item.profitTitle }}</text>
					</view>
					<view class="prices flex-box flex-between" style="margin-left: 0;">
						<view>
							<view class="priceNow">
								<text class="price myPrice">{{item.type == 2?item.open_group_price:item.price}}</text>
								<template v-if='(item.type == 1 || item.type == 0) && parseFloat(item.price)!=parseFloat(item.full_price)'>
									<text class="priceReg myPrice">{{item.full_price}}</text>
								</template>
								<template v-if='item.type == 2 && parseFloat(item.full_price)!=parseFloat(item.open_group_price)'>
									<text class="priceReg myPrice">{{item.full_price}}</text>
								</template>
							</view>
						</view>
					<!-- 	<text class="lines">
							{{ item.price_description }}
						</text> -->
						<view class="position flex-box align-center" v-if='startUp.enableLbs.state == 1 && positionshow == 1 && item.distance'>
							<text class="iconfont icon-dingwei"></text>
							<text class="txt">{{parseFloat(item.distance)>999?(parseFloat(item.distance)/1000).toFixed(2)+'km':parseFloat(item.distance).toFixed(2)+'m'}}</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!-- 平铺状态 -->
		<view class="flex-box flex-between repeatGoodsList my-box" v-if='type == 1 && goodsData.length>0'>
			<waterfallsFlow ref='waterfallsFlow_' :list="goodsData" @image-click='toDetail' imageSrcKey='img' idKey='goods_id' :offset='12'>
				<!-- #ifndef H5  -->
				<view v-for="(item, index) of goodsData" :key="index" slot="slot{{index}}" class="goods-box-msg" @click="toDetail(item)">
					<view class="thmeTxt lines2 hisGoodsName2">
						<text v-if='item.type == 1' class="speTag">特价</text>
						<text v-if='item.type == 2' class="speTag">团购</text>
						{{item.name}}
					</view>
					<view class="saled" v-if='hot == 1'>
						<text>已售{{item.sales_number}}</text>
						<text>热度{{item.show_number}}</text>
					</view>
					<view class="profitTitle_ lines" v-if='item.profitTitle'>
						<text>{{ item.profitTitle }}</text>
					</view>
					<view class="prices flex-box flex-between">
						<view>
							<view class="priceNow">
								<text class="price myPrice">{{item.type == 2?item.open_group_price:item.price}}</text>
								<template v-if='(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)'>
									<text class="priceReg myPrice">{{item.full_price}}</text>
								</template>
								<template v-if='item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)'>
									<text class="priceReg myPrice">{{item.full_price}}</text>
								</template>
							</view>
						</view>
						<view class="position flex-box align-center" v-if='startUp.enableLbs.state == 1 && positionshow == 1 && item.distance'>
							<text class="iconfont icon-dingwei"></text>
							<text class="txt">{{parseFloat(item.distance)>999?(parseFloat(item.distance)/1000).toFixed(2)+'km':parseFloat(item.distance).toFixed(2)+'m'}}</text>
						</view>
					</view>
					
					
					<view class="maskObtained" v-if='item.state == 0'>
						<image :src="staticUrl+'/images/Obtained.png'" class="icon-obtained"></image>
					</view>
				</view>
				<!--  #endif -->
				<!-- #ifdef H5 -->
				<template v-slot:default="{item}">
					<view class="goods-box-msg">
						<view class="thmeTxt lines2 hisGoodsName2">
							<text v-if='item.type == 1' class="speTag">特价</text>
							<text v-if='item.type == 2' class="speTag">团购</text>
							{{item.name}}
						</view>
						<view class="saled" v-if='hot == 1'>
							<text>已售{{item.sales_number}}</text>
							<text>热度{{item.show_number}}</text>
						</view>
						<view class="profitTitle_ lines" v-if='item.profitTitle'>
							<text>{{ item.profitTitle }}</text>
						</view>
						<view class="prices flex-box flex-between">
							<view class="priceNow">
								<text class="price myPrice">{{item.type == 2?item.open_group_price:item.price}}</text>
								<template v-if='(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)'>
									<text class="priceReg myPrice">{{item.full_price}}</text>
								</template>
								<template v-if='item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)'>
									<text class="priceReg myPrice">{{item.full_price}}</text>
								</template>
							</view>
							<view class="position flex-box align-center" v-if='startUp.enableLbs.state == 1 && positionshow == 1 && item.distance'>
								<text class="iconfont icon-dingwei"></text>
								<text class="txt">{{parseFloat(item.distance)>999?(parseFloat(item.distance)/1000).toFixed(2)+'km':parseFloat(item.distance).toFixed(2)+'m'}}</text>
							</view>
						</view>
						
					</view>
					<view class="maskObtained" v-if='item.state == 0'>
						<image :src="staticUrl+'/images/Obtained.png'" class="icon-obtained"></image>
					</view>
				</template>
				<!-- #endif -->
			</waterfallsFlow>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import waterfallsFlow from "./waterfall/waterfall.vue";
	export default {
		components:{waterfallsFlow},
		/**
		 * type: 1瀑布流  2列表
		 * hot:是否显示热度 0不显示 1显示
		 * 
		 * **/ 
		props:['goodsData','type','hot','positionshow'], 
		data() {
			return {
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
			
			
			}
		},
		methods:{
			toDetail(goods){
				this.toGoods(goods.goods_id,goods.store_id)
			}
		},
		computed:{
			...mapState(['startUp','color']),
		}
	}
</script>

<style scoped lang="scss">


/* 商品列表 */
.hisGoodsList{
	padding:30rpx 24rpx;
	.hisImg{
		width: 200rpx;
		height: 200rpx;
		margin: 0 24rpx 0 0;
		border-radius: 8rpx;
	}
	.speTag{
		margin-right: 4rpx;
	}
	.color333{
			color: #333333;
			padding: 0;
			font-size: 26rpx;
			.bg{display: none;}
		}
	.prices{
		margin: 10rpx 8rpx 0 16rpx;
		.priceNow{
			margin-right: 10rpx;
			.price{
				font-size: 32rpx;
				color: $uni-color-price;
			}
		}
		.priceReg{
			color: #999;
			text-decoration: line-through;
			.price{
				color: #999;
				text-decoration: line-through;
			}
		}
		.position{
			text{
				font-size: 26rpx;
				color: #666666;
				margin-left: 6rpx;
			}
		}
	}
	.hisGoods{
		margin-bottom: 26rpx; 
		border-bottom: 1px solid #e0e0e0;
		padding-bottom: 26rpx;
		position: relative;
		&:nth-last-of-type(1){border-bottom: none;}
		.goodsmsg{
			flex-direction: column;
			.selfEnd{margin-top: 20rpx;}
			.hisGoodsName{
				margin-bottom: 10rpx;
				line-height: 36rpx;
				font-size: 28rpx;
			}
			.saled{
				text{
					color: #888888;
					font-size: 24rpx;
					padding-right: 20rpx;
					border-right: 1px solid #DDDDDD;
					margin-right: 20rpx;
					line-height: 20rpx;
					&:nth-last-of-type(1){border: none;}
				}
			}
		}
	}
}
</style>
